import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

// 主题设置接口
export interface ThemeSettings {
    theme: string
    primaryColor: string
    compactMode: boolean
    fixedHeader: boolean
    showBreadcrumb: boolean
    language: string
}

export const useAppStore = defineStore('app', () => {
    // 基础状态
    const sidebarCollapsed = ref(false)
    const language = ref('zh-CN')

    // 主题相关状态
    const theme = ref('default')
    const primaryColor = ref('#409EFF')
    const compactMode = ref(false)
    const fixedHeader = ref(true)
    const showBreadcrumb = ref(true)

    // 计算属性
    const isDarkTheme = computed(() => theme.value === 'dark')
    const themeSettings = computed((): ThemeSettings => ({
        theme: theme.value,
        primaryColor: primaryColor.value,
        compactMode: compactMode.value,
        fixedHeader: fixedHeader.value,
        showBreadcrumb: showBreadcrumb.value,
        language: language.value
    }))

    // 侧边栏操作
    const toggleSidebar = () => {
        sidebarCollapsed.value = !sidebarCollapsed.value
    }

    const setSidebarCollapsed = (collapsed: boolean) => {
        sidebarCollapsed.value = collapsed
    }

    // 主题操作
    const setTheme = (newTheme: string) => {
        theme.value = newTheme
        localStorage.setItem('app-theme', newTheme)
    }

    const setPrimaryColor = (color: string) => {
        primaryColor.value = color
        localStorage.setItem('app-primary-color', color)
    }

    const setCompactMode = (compact: boolean) => {
        compactMode.value = compact
        localStorage.setItem('app-compact-mode', String(compact))
    }

    const setFixedHeader = (fixed: boolean) => {
        fixedHeader.value = fixed
        localStorage.setItem('app-fixed-header', String(fixed))
    }

    const setShowBreadcrumb = (show: boolean) => {
        showBreadcrumb.value = show
        localStorage.setItem('app-show-breadcrumb', String(show))
    }

    const setLanguage = (lang: string) => {
        language.value = lang
        localStorage.setItem('app-language', lang)
    }

    // 重置主题设置
    const resetTheme = () => {
        theme.value = 'default'
        primaryColor.value = '#409EFF'
        compactMode.value = false
        fixedHeader.value = true
        showBreadcrumb.value = true

        // 清除本地存储
        localStorage.removeItem('app-theme')
        localStorage.removeItem('app-primary-color')
        localStorage.removeItem('app-compact-mode')
        localStorage.removeItem('app-fixed-header')
        localStorage.removeItem('app-show-breadcrumb')
    }

    // 从本地存储初始化设置
    const initializeSettings = () => {
        const savedTheme = localStorage.getItem('app-theme')
        const savedPrimaryColor = localStorage.getItem('app-primary-color')
        const savedCompactMode = localStorage.getItem('app-compact-mode')
        const savedFixedHeader = localStorage.getItem('app-fixed-header')
        const savedShowBreadcrumb = localStorage.getItem('app-show-breadcrumb')
        const savedLanguage = localStorage.getItem('app-language')

        if (savedTheme) theme.value = savedTheme
        if (savedPrimaryColor) primaryColor.value = savedPrimaryColor
        if (savedCompactMode) compactMode.value = savedCompactMode === 'true'
        if (savedFixedHeader !== null) fixedHeader.value = savedFixedHeader === 'true'
        if (savedShowBreadcrumb !== null) showBreadcrumb.value = savedShowBreadcrumb === 'true'
        if (savedLanguage) language.value = savedLanguage
    }

    // 导出设置为JSON
    const exportSettings = (): string => {
        return JSON.stringify(themeSettings.value, null, 2)
    }

    // 导入设置
    const importSettings = (settings: Partial<ThemeSettings>) => {
        if (settings.theme) setTheme(settings.theme)
        if (settings.primaryColor) setPrimaryColor(settings.primaryColor)
        if (settings.compactMode !== undefined) setCompactMode(settings.compactMode)
        if (settings.fixedHeader !== undefined) setFixedHeader(settings.fixedHeader)
        if (settings.showBreadcrumb !== undefined) setShowBreadcrumb(settings.showBreadcrumb)
        if (settings.language) setLanguage(settings.language)
    }

    return {
        // 状态
        sidebarCollapsed,
        theme,
        primaryColor,
        compactMode,
        fixedHeader,
        showBreadcrumb,
        language,

        // 计算属性
        isDarkTheme,
        themeSettings,

        // 侧边栏方法
        toggleSidebar,
        setSidebarCollapsed,

        // 主题方法
        setTheme,
        setPrimaryColor,
        setCompactMode,
        setFixedHeader,
        setShowBreadcrumb,
        setLanguage,
        resetTheme,

        // 工具方法
        initializeSettings,
        exportSettings,
        importSettings
    }
})